<!-- 单个选项组件 -->
<template>
  <div class="mian">
    <!-- 单选组 -->
    <el-radio-group v-model="answerOpts" @change="selectRadio" v-if="isShowRadio">
      <el-row class="optRow" type="flex" align="middle" v-for="(item,index) in options" :key="index" >
        <el-radio :label="item.code" v-model="item.isRight"></el-radio>
        <el-input class="optInp" v-model="item.title" @change="selectRadio"></el-input>
        <el-upload
          class="upload-demo"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple
          v-model="item.img"
        >
          <div class="el-upload__text">上传图片</div>
        </el-upload>
      </el-row>
      <el-button type="primary" @click="addOpt">增加选项</el-button>

    </el-radio-group>
    <!-- 复选框 -->

    <el-checkbox-group v-model="answerOpts" @change="selectCheckBox" v-else>
      <el-row class="optRow" type="flex" align="middle" v-for="(item,index) in options" :key="index">
        <el-checkbox :label="item.code" v-model="item.isRight"></el-checkbox>
        <el-input class="optInp" v-model="item.title" ></el-input>
        <el-upload
          class="upload-demo"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple
          v-model="item.img"
        >
          <div class="el-upload__text">上传图片</div>
        </el-upload> -->
      </el-row>
      <el-button type="primary" @click="addOpt">增加选项</el-button>
    </el-checkbox-group>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  // import引入的组件需要注入到对象中才能使用
  props: {
    isShowRadio: {
      required: true,
      type: Boolean
    }
  },
  components: {},
  data () {
    // 这里存放数据
    return {
      answerOpts: [], // 答案选项
      options: [
        { code: 'A', title: '', img: '', isRight: false },
        { code: 'B', title: '', img: '', isRight: false },
        { code: 'C', title: '', img: '', isRight: false },
        { code: 'D', title: '', img: '', isRight: false }
      ]
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 单选选中传值
    selectRadio () {
      this.options.forEach(e => {
        e.isRight = false
        // 如果答案列表中有这个选项，那么就改为ture
        if (this.answerOpts.includes(e.code)) {
          e.isRight = true
        }
      })
      // const index = this.options.findIndex(item => {
      //   return item.code === this.answerOpts
      // })
      // this.options[index].isRight = true

      this.$emit('sendRaidoOptMsg', this.options)
    },
    // 多选框选中数据
    selectCheckBox () {
      this.options.forEach(e => {
        e.isRight = false
        // 如果答案列表中有这个选项，那么就改为ture
        if (this.answerOpts.includes(e.code)) {
          e.isRight = true
        }
      })
      this.$emit('sendRaidoOptMsg', this.options)
    },
    // 增加一条新数据
    addOpt () {
      if (this.options.length === 4) {
        this.options.push({ code: 'E', title: '', img: '', isRight: false })
      } else if (this.options.length === 5) {
        this.options.push({ code: 'F', title: '', img: '', isRight: false })
      } else {
        this.$message.warning('最多可以添加六条选项哦~')
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {},
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style>
.el-upload-dragger {
  width: 150px;
  height: 45px;
}
.el-upload__text {
  line-height: 40px;
}
.upload-demo {
  margin-left: 20px;
}
.optInp {
  width: 500px;
  margin-left: -10px;
}
.optRow {
  margin-top: 20px;
}
.el-checkbox:last-of-type {
  margin-right: 25px;
}
</style>
